<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>武汉理工大学出版社</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css">
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<!-- 头部 -->
		<div id="header"></div>

		<div id="bootstrap"></div>

		<div class="details" id="app">
			<div class="test" v-html="content"></div>
			<!-- 加载中 -->
			<div class="load_page" v-show="isLoadingShow">
				<div class="content">
					<div class="item">
						<i class="loader --1"></i>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部 -->
		<div id="footer"></div>
	</body>

	<script>
		function getQueryVariable(variable)
		{
			const query = window.location.search.substring(1);
			const vars = query.split("&");
			for (var i=0;i<vars.length;i++) {
				var pair = vars[i].split("=");
				if(pair[0] == variable){return pair[1];}
			}
			return(false);
		}
		const App = {
			data() {
				return {
					content: '',
					isLoadingShow:false
				}
			},
			mounted(){
				sessionStorage.setItem('href',window.location.href);
				this.getSingleDetail()
			},
			methods:{
				async getSingleDetail() {
					let that = this;
					that.isLoadingShow = true
					const id = getQueryVariable("id");
					console.log(id)
					that.url = "http://dbs.wutp.com.cn/CM-API/homePageApi/getSingleDetail?id="+id
					await axios({
						method: "get",
						url: that.url,
					}).then(function (res) {
						that.content = res.data.data.content;
						that.isLoadingShow = false
					})
				}
			}
		};
		Vue.createApp(App).mount('#app');
	</script>

	<style>
		.details {
			margin: 0 3rem;
			padding-bottom: 0.5rem;
		}
		.title{
			font-size: 0.26rem;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #222;
			line-height: 0.26rem;
			margin: 0.47rem 0;
			text-align: center;
		}
		.pre_next{
			border-top: 0.01rem solid #D7D7D7;
			margin-top: 0.4rem;
			padding-top: 0.44rem;
		}

	</style>
</html>
